<template>
  <div>
    <div>

        <a-form layout="inline" class="nmv-search-form-auto" style="padding:20px 20px 0;background-color:white;">
          <a-form-item label="登录口令">
            <a-input class="nmv-w-200" v-model="grid.queryParams.loginCode" placeholder="请输入登录口令"></a-input>
          </a-form-item>
          <a-form-item label="设备编号">
            <a-input class="nmv-w-200" v-model="grid.queryParams.deviceNo" placeholder="请输入设备编号"></a-input>
          </a-form-item>
          <a-form-item label="操作类型">
            <a-select placeholder="请选择操作类型" allowClear @change="searchQuerys" v-model="grid.queryParams.cmdCode"
              class="nmv-w-200 ">
              <a-select-option value="2">解锁</a-select-option>
              <a-select-option value="1">锁定</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="测试时间">
            <a-range-picker v-model="time" format="YYYY-MM-DD HH:mm" :show-time="{
              hideDisabledOptions: true,
              defaultValue: [moment('00:00', 'HH:mm'), moment('23:59', 'HH:mm')],
              format: 'HH:mm'
            }" :placeholder="['开始时间', '结束时间']" @ok="rangeTimeOk" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="searchQuerys">查询</a-button>
            <a-button style="margin-left:12px;" @click="queryReset">重置</a-button>
          </a-form-item>
        </a-form>
      <a-card :bordered="false" :bodyStyle="{ padding: '0px 20px 20px 20px' }">
        <a-table rowKey="id" :loading="grid.load" :locale="locale" :pagination="false" :columns="grid.columns"
           :data-source="grid.data">
          <span slot="cmdCode" slot-scope="text">
            <div class="flex_start" v-show="text == 1">
              <img src="../../assets/img/carlock.png" style="width:16px;margin-right:6px;" />
              <div>锁定</div>
            </div>
            <div class="flex_start" v-show="text === 2">
              <img src="../../assets/img/ncarlock.png" style="width:16px;margin-right:6px;" />
              <div>解锁</div>
            </div>
          </span>
          <span slot="status" slot-scope="text">

            <div class="flex_start" v-show="+text == 1">
              <div class="yuan green"></div>
              <div>成功</div>
            </div>
            <div class="flex_start" v-show="+text == 0">
              <div class="yuan lightBlue"></div>
              <div>执行中</div>
            </div>
            <div class="flex_start" v-show="+text == 2">
              <div class="yuan red"></div>
              <div>失败</div>
            </div>
          </span>
        </a-table>
        <div v-show="grid.total !== 0" style="text-align:right;">
          <a-pagination show-size-changer :current="grid.queryParams.pageNum" :pageSize="grid.queryParams.pageSize"
            @change="onChange" @showSizeChange="onShowSizeChange" style="margin-top:20px;" size="small"
            :total="grid.total" :show-total="total => `共${grid.total}条 `" />
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import { StoreInfo } from '@/services/store'
import { cardTitleStyle, stateTextStyle } from '@/utils/style.js'

import { vehicleOptions } from '@/utils/options.js'
import { commandLogList } from '@/services/car'
import Empty from '@/components/Empty/Empty'
import moment from 'moment'

export default {
  name: 'VehicleList',

  data () {
    return {
      cardTitleStyle,
      moment,
      locale: {
        emptyText: <Empty />
      },
      // 数据列表
      grid: {
        load: false,
        total: 0,
        queryParams: {
          pageSize: 10,
          pageNum: 1
        },
        data: [],
        columns: [
          {
            title: '登录口令',
            dataIndex: 'loginCode',
            key: 'loginCode',
            width: 80
          },
          {
            title: '设备编号',
            dataIndex: 'deviceNo',
            key: 'deviceNo',
            width: 100
          },
          {
            title: '操作类型',
            key: 'cmdCode',
            dataIndex: 'cmdCode',
            width: 80,
            scopedSlots: { customRender: 'cmdCode' }
          },
          {
            title: '测试结果',
            key: 'status',
            scopedSlots: { customRender: 'status' },
            dataIndex: 'status',
            width: 80
          },

          {
            title: '测试时间',
            key: 'createTime',
            dataIndex: 'createTime',
            width: 140
          },
          {
            title: '设备地址',
            key: 'address',
            dataIndex: 'address',
            width: 160,
            ellipsis: true
          }
        ]
      },

      stateStyle: Object.freeze(stateTextStyle),
      orgOptions: [],
      vehicleOptions,
      brandOptions: [],
      valueIn: [],
      valueOut: [],
      carStoreAllListsIn: [],
      carStoreAllListsOut: [],
      time: []
    }
  },
  methods: {

    onShowSizeChange (current, pageSize) {
      this.grid.queryParams.pageSize = pageSize
      this.grid.queryParams.pageNum = 1

      console.log(current)
      this.searchQuery()
    },
    rangeTimeOk (value) {
      const [start, end] = value
      this.grid.queryParams.beginCreateTime = start.format(
        'YYYY-MM-DD HH:mm:ss'
      )
      this.grid.queryParams.endCreateTime = end.format('YYYY-MM-DD HH:mm:ss')
      this.searchQuerys()
    },
    async getList () {
      this.grid.load = true

      const res = await commandLogList(this.grid.queryParams)
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.grid.data = response.records
        this.grid.total = response.total
        this.grid.load = false
      } else {
        this.$message.newFun(msg, 'error', 2)
        this.grid.data = []
        this.grid.total = 0
        this.grid.load = false
      }
    },
    onChange (page, pageSize) {
      this.grid.queryParams.pageNum = page
      console.log(pageSize)
      this.searchQuery()
    },
    searchQuerys () {
      this.grid.queryParams.pageNum = 1
      this.grid.queryParams.pageSize = 10
      this.getList()
    },
    // 搜索
    searchQuery () {
      this.getList()
    },
    // 重置
    queryReset () {
      this.time = []

      this.grid.queryParams = {
        pageSize: 10,
        pageNum: 1
      }
      this.getList()
    },

    async carStoreAllListIn (value) {
      const params = {
        name: value.name,
        pageNum: value.page_index,
        pageSize: value.page_size
      }
      const res = await StoreInfo(params)
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        if (value.page_index === 1) {
          this.carStoreAllListsIn = response.records
        } else {
          this.carStoreAllListsIn = this.carStoreAllListsIn.concat(response.records)
        }
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async carStoreAllListOut (value) {
      const params = {
        name: value.name,
        pageNum: value.page_index,
        pageSize: value.page_size
      }
      const res = await StoreInfo(params)
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        if (value.page_index === 1) {
          this.carStoreAllListsOut = response.records
        } else {
          this.carStoreAllListsOut = this.carStoreAllListsOut.concat(response.records)
        }
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    }
  },
  created () {
    this.getList()
  }
}
</script>
